/*!
 * @toast-ui/editor
 * @version 3.1.3 | Thu Feb 10 2022
 * @author NHN FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */
/*
  z-index basis
  -1: pseudo element
  20 - preview, wysiwyg
  30 - wysiwyg code block language editor, popup, context menu
  40 - tooltip
*/

:root {
    --titlebefore-color: #00c4b6; /* 各级标题点缀颜色（绿色） */
    --ulol-color: #81accf; /* 有序无序列表前缀颜色（灰色） */
    --focus-color: #ff5d52; /* 点击某些元素（如标题）显示的颜色（偏红） */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}

.ProseMirror {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'SimHei', 'Arial', 'SimSun', serif;;
    color: #222;
    font-size: 13px;
    overflow-y: auto;
    overflow-X: hidden;
    height: calc(100% - 36px);
}

.ProseMirror .placeholder {
    color: #999;
}

.ProseMirror:focus {
    outline: none;
}

.ProseMirror-selectednode {
    outline: none;
}

table.ProseMirror-selectednode {
    border-radius: 2px;
    outline: 2px solid #00a9ff;
}

.html-block.ProseMirror-selectednode {
    border-radius: 2px;
    outline: 2px solid #00a9ff;
}

.toastui-editor-contents {
    margin: 0;
    padding: 0;
    /*font-size: 13px;*/
    font-family: '微软雅黑', Serif, serif;
    z-index: 20;
}

.toastui-editor-contents *:not(table) {
    line-height: 160%;
    box-sizing: content-box;
}

.toastui-editor-contents i,
.toastui-editor-contents cite,
.toastui-editor-contents em,
.toastui-editor-contents var,
.toastui-editor-contents address,
.toastui-editor-contents dfn {
    font-style: italic;
}

.toastui-editor-contents strong {
    font-weight: bold;
}

.toastui-editor-contents p {
    margin: 10px 0;
    color: #222;
}

.toastui-editor-contents > h1:first-of-type,
.toastui-editor-contents > div > div:first-of-type h1 {
    margin-top: 14px;
}

.toastui-editor-contents h1,
.toastui-editor-contents h2,
.toastui-editor-contents h3,
.toastui-editor-contents h4,
.toastui-editor-contents h5,
.toastui-editor-contents h6 {
    font-weight: bold;
    color: #222;
}

.toastui-editor-contents h1 {
    font-size: 25px;
    line-height: 28px;
    border-bottom: 3px double #999;
    margin: 52px 0 15px 0;
    padding-bottom: 7px;
}

.toastui-editor-contents h2 {
    font-size: 23px;
    line-height: 24px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 7px;
    margin-left: .18rem;
}
.toastui-editor-contents h2::before {
    content: '\e689' !important;
    color: var(--titlebefore-color);
    position: absolute;
    right: calc(100% + .4em);
}

@-moz-keyframes avatar_turn_around{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes avatar_turn_around{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes avatar_turn_around{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes avatar_turn_around{from{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
h2:before {
    display: inline-block;
    -webkit-animation: avatar_turn_around 1s linear infinite;
    -moz-animation: avatar_turn_around 1s linear infinite;
    -o-animation: avatar_turn_around 1s linear infinite;
    -ms-animation: avatar_turn_around 1s linear infinite;
    animation: avatar_turn_around 1s linear infinite;
    font-size: 34px;
    margin-left: -29px;
}

.toastui-editor-contents h3 {
    font-size: 1.4em;
    line-height: 1.43;
    margin: 1.6em auto 1.2em;
    padding-left: 9px;
    border-left: 5px solid var(--titlebefore-color);
}

.toastui-editor-contents h4 {
    margin-top: 1.3em;
    font-size: 1.2em;
    padding-left: 6px;
    padding-right: 6px;
    display: inline-block;
    border: 1px solid var(--titlebefore-color);
    border-top: 4px solid var(--titlebefore-color);
}

.toastui-editor-contents h3,
.toastui-editor-contents h4 {
    line-height: 18px;
}

.toastui-editor-contents h5 {
    font-size: 17px;
}

.toastui-editor-contents h5::before {
    content: 'H5';
    top: 0.18rem;
    color: var(--titlebefore-color);
    position: absolute;
    right: calc(100% + .75em);
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    /* 文本强制不换行 */
    border: 0;
}

.toastui-editor-contents h6::before {
    content: 'H6';
    top: 0.18rem;
    color: var(--titlebefore-color);
    position: absolute;
    right: calc(100% + .75em);
    font-size: 0.7rem;
    font-weight: bold;
    white-space: nowrap;
    /* 文本强制不换行 */
    border: 0;
}

.toastui-editor-contents h6 {
    font-size: 15px;
}

.toastui-editor-contents h5,
.toastui-editor-contents h6 {
    line-height: 17px;
    margin: 9px 0 -4px;
}

.toastui-editor-contents del {
    color: #999;
}

.toastui-editor-contents blockquote {
    margin: 14px 0;
    border-left: 4px solid #e5e5e5;
    padding: 0 16px;
    color: #999;
}

.toastui-editor-contents blockquote p,
.toastui-editor-contents blockquote ul,
.toastui-editor-contents blockquote ol {
    color: #999;
}

.toastui-editor-contents blockquote > :first-child {
    margin-top: 0;
}

.toastui-editor-contents blockquote > :last-child {
    margin-bottom: 0;
}

.toastui-editor-contents pre,
.toastui-editor-contents code {
    font-family: Consolas, Courier, '微软雅黑', Serif, serif;
    border: 0;
    border-radius: 0;
}

.toastui-editor-contents pre {
    margin: 2px 0 8px;
    padding: 18px;
    background-color: #f4f7f8;
}

.toastui-editor-contents code {
    color: #ff3502;
    background-color: #f8f5ec;
    padding: 2px 3px;
    letter-spacing: -0.3px;
    border-radius: 2px;
}

.toastui-editor-contents pre code {
    padding: 0;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
}

.toastui-editor-contents img {
    margin: 4px 0 10px;
    box-sizing: border-box;
    vertical-align: top;
    max-width: 100%;
}

.toastui-editor-contents table {
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 12px 0 14px;
    color: #222;
    width: auto;
    border-collapse: collapse;
    box-sizing: border-box;
}

.toastui-editor-contents table th,
.toastui-editor-contents table td {
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 14px 5px 12px;
    height: 32px;
}

.toastui-editor-contents table th {
    background-color: #555;
    font-weight: 300;
    color: #fff;
    padding-top: 6px;
}

.toastui-editor-contents th p {
    margin: 0;
    color: #fff;
}

.toastui-editor-contents td p {
    margin: 0;
    padding: 0 2px;
}

.toastui-editor-contents td.toastui-editor-cell-selected {
    background-color: #d8dfec;
}

.toastui-editor-contents th.toastui-editor-cell-selected {
    background-color: #908f8f;
}

.toastui-editor-contents ul,
.toastui-editor-contents menu,
.toastui-editor-contents ol,
.toastui-editor-contents dir {
    display: block;
    list-style-type: none;
    padding-left: 24px;
    margin: 6px 0 10px;
    color: #222;
}

.toastui-editor-contents ol {
    list-style-type: none;
    counter-reset: li;
}

.toastui-editor-contents ol > li {
    counter-increment: li;
}

.toastui-editor-contents ul > li::before,
.toastui-editor-contents ol > li::before {
    display: inline-block;
    position: absolute;
}

.toastui-editor-contents ul > li::before {
    content: '';
    margin-top: 6px;
    margin-left: -17px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ccc;
}

.toastui-editor-contents ol > li::before {
    content: '.' counter(li);
    margin-left: -28px;
    width: 24px;
    text-align: right;
    direction: rtl;
    color: #aaa;
}

.toastui-editor-contents ul ul,
.toastui-editor-contents ul ol,
.toastui-editor-contents ol ol,
.toastui-editor-contents ol ul {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.toastui-editor-contents ul li,
.toastui-editor-contents ol li {
    position: relative;
}

.toastui-editor-contents ul p,
.toastui-editor-contents ol p {
    margin: 0;
}

.toastui-editor-contents hr {
    border-top: 1px solid #eee;
    margin: 16px 0;
}

.toastui-editor-contents a {
    text-decoration: underline;
    color: #4b96e6;
}

.toastui-editor-contents a:hover {
    color: #1f70de;
}

.toastui-editor-contents .image-link {
    position: relative;
}

.toastui-editor-contents .image-link:hover::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0;
    border-radius: 50%;
    border: 1px solid #c9ccd5;
    background: #fff url() no-repeat;
    background-position: center;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.toastui-editor-contents .task-list-item {
    border: 0;
    list-style: none;
    padding-left: 24px;
    margin-left: -24px;
}

.toastui-editor-contents .task-list-item::before {
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: center;
    content: '';
    margin-left: 0;
    margin-top: 0;
    border-radius: 2px;
    height: 18px;
    width: 18px;
    position: absolute;
    left: 0;
    top: 1px;
    cursor: pointer;
    background: transparent url();
}

.toastui-editor-contents .task-list-item.checked::before {
    background-image: url();
}

.toastui-editor-custom-block .toastui-editor-custom-block-editor {
    background: #f9f7fd;
    color: #452d6b;
    border: solid 1px #dbd4ea;
}

.toastui-editor-custom-block .toastui-editor-custom-block-view {
    position: relative;
    padding: 9px 13px 8px 12px;
}

.toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
    border: solid 1px #dbd4ea;
    border-radius: 2px;
}

.toastui-editor-custom-block .toastui-editor-custom-block-view .tool {
    position: absolute;
    right: 10px;
    top: 7px;
    display: none;
}

.toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view .tool {
    display: block;
}

.toastui-editor-custom-block-view button {
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-left: 8px;
    padding: 3px;
    border: solid 1px #cccccc;
    background: url()
    no-repeat;
    background-position: center;
    background-size: 30px 30px;
}

.toastui-editor-custom-block-view .info {
    font-size: 14px;
    font-weight: bold;
    color: #5200d0;
    vertical-align: middle;
}

.toastui-editor-contents .toastui-editor-ww-code-block {
    position: relative;
}

.toastui-editor-contents .toastui-editor-ww-code-block:after {
    content: attr(data-language);
    position: absolute;
    display: inline-block;
    top: 10px;
    right: 10px;
    height: 24px;
    padding: 3px 35px 0 10px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    background: #e5e9ea url() no-repeat;
    background-position: right;
    border-radius: 2px;
    background-size: 30px 30px;
    cursor: pointer;
}

.toastui-editor-ww-code-block-language {
    position: fixed;
    display: inline-block;
    width: 100px;
    height: 27px;
    right: 35px;
    border: 1px solid #ccc;
    border-radius: 2px;
    background-color: #fff;
    z-index: 30;
}

.toastui-editor-ww-code-block-language input {
    box-sizing: border-box;
    margin: 0;
    padding: 0 10px;
    height: 100%;
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
}

.toastui-editor-contents-placeholder::before {
    content: attr(data-placeholder);
    color: grey;
    line-height: 160%;
    position: absolute;
}

.toastui-editor-md-preview .toastui-editor-contents h1 {
    min-height: 28px;
}

.toastui-editor-md-preview .toastui-editor-contents h2 {
    min-height: 23px;
}

.toastui-editor-md-preview .toastui-editor-contents blockquote {
    min-height: 20px;
}

.toastui-editor-md-preview .toastui-editor-contents li {
    min-height: 22px;
}

.toastui-editor-pseudo-clipboard {
    position: fixed;
    opacity: 0;
    width: 0;
    height: 0;
    left: -1000px;
    top: -1000px;
    z-index: -1;
}

#editor>ol:first-child {
    margin-top: 30px;
}
#editor ol,
#editor ul {
    padding-left: 35px;
    margin: .5rem 0;
}

#editor ol>li>*,
#editor ul>li>* {
    color: #333;
    font-weight: normal;
}

#editor ol>li>*:not(ol):not(ul),
#editor ul>li>*:not(ol):not(ul) {
    padding-left: .25rem;
}

#editor ul li, #editor ol li, #editor .ul .li, #editor .ol .li {
    list-style-type: none;
}

#editor ul>li:not(.tab):before, #editor .ul>.li:not(.tab):before {
    margin-left: -22px;
    margin-top: 10px;
    width: .62em;
    height: .62em;
    border: .1em solid var(--ulol-color); /* #81d8cf */
    border-radius: .31em;
    background: 0 0;
    content: '';
    line-height: .42em;
}

#editor ol li:before, #editor ul li:before, #editor .ol .li:before, #editor .ul .li:before {
    position: absolute;
    background: var(--ulol-color); /* #81d8cf */
    color: #fff;
    cursor: pointer;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

#editor ol li:first-child, #editor .ol .li:first-child { /* https://www.w3school.com.cn/cssref/pr_gen_counter-increment.asp */
    counter-reset: li;
}

#editor ol li:hover:before, #editor ul li:hover:before, #editor .ol .li:hover:before, #editor .ul .li:hover:before {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
}

#editor ul>li:not(.tab):hover:before, #editor .ul>.li:not(.tab):hover:before{
    border-color: var(--focus-color);
}

#editor ol>li:before, #editor .ol>.li:before {
    margin-top: 6px;
    margin-left: -25px;
    width: 1.65em;
    height: 1.65em;
    border-radius: 0.825em;
    content: counter(li);
    /*counter-increment: li;*/
    text-align: center;
    font-size: .65em;
    line-height: 1.7em;
}

/* 列表子项上下间隔调整 */
#editor ul li *, #editor ol li *, #editor .ul .li *, #editor .ol .li * {
    margin-top: 0;
    margin-bottom: 0;
}

/* 列表上下间隔调整 */
#editor ul li, #editor ol li, #editor .ul .li, #editor .ol .li {
    margin-top: 7px;
    margin-bottom: 7px;
}
